<template>
    <view :class="['navbar', { center: config.center }]" :style="{ height: config.isHigh ? nav.navBarHeight : 0 }">
        <view
            class="navbar-wrapper"
            :style="{
                height: nav.navBarHeight,
                'padding-top': `${nav.statusBarHeight}px`,
                position: config.fixed,
                color,
                background
            }"
        >
            <view class="navbar-box" :style="{ 'padding-right': `${nav.menuButtonRectWidth + 15}px` }">
                <template v-if="!$slots.custom">
                    <!-- #ifdef MP-WEIXIN -->
                    <view :class="['navbar-main', { 'navbar-icon__fixed': config.backFixed }]">
                        <text @click="navBack" :class="['back-icon hx-icon-fanhui', { iconBg: config.iconBg }]" v-if="back"></text>
                        <view v-if="config.showTitle" :class="['navbar-title', { 'no-icon': !back }]"> {{ title || "嗨喜互动" }}</view>
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef H5 -->
                    <view :class="['navbar-left', { 'navbar-icon__fixed': config.backFixed }]">
                        <text @click="navBack" :class="['back-icon hx-icon-fanhui', { iconBg: config.iconBg }]" v-if="back"></text>
                    </view>
                    <view class="navbar-center">
                        <view class="navbar-title" v-if="config.showTitle"> {{ title || "嗨喜互动" }}</view>
                    </view>
                    <view class="navbar-right">
                        <view class="navbar-right__content">
                            <slot name="slot-right"></slot>
                        </view>
                    </view>
                    <!-- #endif -->
                </template>
                <slot v-else name="custom"></slot>
            </view>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex"
export default {
    data() {
        return {
            config: {
                fixed: "fixed", //是否固定 fixed固定 static不固定
                backFixed: false, //是否只固定返回按钮
                customLeftEvent: false, //点击返回是否需要注册返回事件
                type: "", //导航栏类型 title 默认 custom自定义
                center: false, //是否居中
                isHigh: true, //是否占高
                showTitle: false,
                iconBg: false
            }
        }
    },
    props: {
        back: {
            type: Boolean,
            default: true
        },
        title: {
            type: String,
            default: ""
        },
        color: {
            type: String,
            default: "#333"
        },
        background: {
            type: String,
            default: "#ffff"
        },
        conf: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        ...mapGetters(["nav"])
    },
    mounted() {
        this.config = Object.assign({}, this.config, this.conf)
    },
    methods: {
        navBack() {
            if (this.customLeftEvent) {
                this.$emit("navBack")
            } else {
                this.$navBack()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.navbar {
    position: relative;
    z-index: 99;
    .navbar-wrapper {
        //#ifdef MP
        padding-bottom: 4px;
        //#endif
        left: 0;
        top: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        font-size: 18px;
        color: #333;
    }
    .navbar-box {
        position: relative;
        display: flex;
        height: 100%;
        box-sizing: border-box;
    }
    .navbar-title {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .no-icon {
        margin-left: 10px;
    }
    &.center {
        .navbar-title {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .no-icon {
            margin-left: 0;
        }
    }
    &-left,
    &-center,
    &-right,
    &-main {
        display: flex;
        align-items: center;
    }
    &-main {
        flex: 1;
    }
    &-icon__fixed {
        .back-icon {
            position: fixed;
            left: 0;
        }
        .navbar-title {
            margin-left: 43px;
        }
    }
    &-left {
        flex: 2;
        justify-content: flex-start;
    }
    &-center {
        flex: 3;
        justify-content: center;
    }
    &-right {
        flex: 2;
        &__content {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 16px;
            width: 100%;
            height: 100%;
            padding: 0 10px 0 10px;
            box-sizing: border-box;
        }
    }
    .back-icon {
        margin: 1px 15px 0 10px;
        font-size: 18px;
    }
    .iconBg {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        line-height: 30px;
        text-align: center;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 14px;
        font-weight: 400;
    }
}
</style>
